{#引入静态文件#}
{% load static %}
{#使用缓存#}
{% load cache %}
{#{% cache 5000 缓存key %}#}
{#{% endcache %}#}
<link rel="stylesheet" type="text/css" href="{% static 'myapp/style.css' %}">

{% if persons %}
<center>
    <div style="width:500px;height:auto;padding:10px;background-color:rgba(0,0,0,0.2)" class="input-bg">
        <table border="1" cellpadding="5" style="border-collapse:collapse;">
            <thead><tr><td>编号</td><td>姓名</td><td>年龄</td><td>创建时间</td></tr></thead>
            <tbody>
                {% for p in persons %}
                    <tr><td> {{ forloop.counter }}</td><td> {{ p.name }}</td><td> {{ p.age }}</td><td> {{ p.create_time }}</td></tr>
                {% endfor %}
            </tbody>
        </table>
        </br>
        <hr style="color:rgba(0,0,0,0.7)">
        <form id="person_form" method="post">
            {% csrf_token %}
            <label for="pname">姓名：</label><input type="text" id="pname" name="pname">
            <label for="page">姓名：</label><input type="text" id="page" name="page">
            <button id="searchbtn">查询</button>
            <button id="addbtn">添加</button>
            <button id="delbtn">删除</button>
            <button id="delbtn">详情</button>
        </form>
    </div>
    <script type="text/javascript">
        pform=document.getElementById('person_form');
        pform.method='POST';
        searchbtn=document.getElementById('searchbtn');
        addbtn=document.getElementById('addbtn');
        delbtn=document.getElementById('delbtn');

        searchbtn.onclick=function(event){
            pname=document.getElementById('pname').value;
            page=document.getElementById('page').value;
            debugger;
            if(pname==''&&page==''){
                alert("姓名和年龄必须输入一个！");
                //event.preventDefult();
                return false;
            }
            pform.action="{% url 'myapp:searchperson' %}";
            pform.submit();

        }

    </script>
</center>
{% else %}
    <p color="red">No polls are available.</p>
{% endif %}